<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <!-- 门店信息弹窗 -->
    <u-popup
      round="26.163rpx"
      :closeable="true"
      :show="storeInfoShow"
      @close="storeInfoClose"
    >
      <view class="info_popup">
        <view class="store_title">門店名稱</view>

        <view class="desc"
          >地址：台灣省高雄市XX大道8號XXXX一號二期北門一樓S8-108號商鋪</view
        >

        <view class="desc">電話：09XX-XXX-XXX</view>

        <view class="desc">營業時間：周一至周日 24小時營業</view>

        <view class="desc"
          >特殊營業：2024-08-08部分時間營業（09：00~18：00）</view
        >
      </view>
    </u-popup>

    <!-- 商店卡片 -->
    <view class="good_store_card">
      <view class="store_card_top">
        <view class="store_card_top_title">店鋪名稱 </view>
        <view class="store_card_top_actions">
          <view
            @click="buyType = 0"
            :class="buyType === 0 ? 'action_wai_active' : 'action_wai'"
            >外帶</view
          >
          <view
            @click="buyType = 1"
            :class="buyType === 1 ? 'waisong_active' : 'waisong'"
            >外送</view
          >
        </view>
      </view>

      <view class="store_card_bottom">
        <!-- 地址 -->
        <view class="store_addree"
          ><img :src="'./static/demo/map-pin.png'" alt="" />
          <text>距離您888km</text>
        </view>

        <!-- 门店信息 -->
        <view class="store_info" @click="storeInfoShow = true"
          >門店信息
          <img :src="'./static/demo/arrow_down.png'" alt="" srcset="" />
        </view>
      </view>
    </view>

    <view class="u-wrap">
      <view class="u-search-box">
        <view class="u-search-inner">
          <text class="u-search-text">搜索</text>
        </view>
      </view>
      <view class="u-menu-wrap">
        <scroll-view
          scroll-y
          scroll-with-animation
          class="u-tab-view menu-scroll-view"
          :scroll-top="scrollTop"
        >
          <view
            v-for="(item, index) in categoryBox"
            :key="index"
            class="u-tab-item"
            :class="[current == index ? 'u-tab-item-active' : '']"
            @tap.stop="swichMenu(index)"
          >
            <text
              class="u-line-2"
              :style="{ color: current == index ? PrimaryColor : '' }"
              >{{ item.name }}</text
            >
          </view>
        </scroll-view>
        <!-- #ifdef MP-ALIPAY -->
        <scroll-view scroll-y class="right-box u-flex-1">
          <view class="page-view">
            <view class="class-item" style="width: 590rpx">
              <view class="item-title">
                <text>{{ categoryBox[current].name }}</text>
              </view>
              <good-one
                :list="categoryBox[current].goods_list"
                @onOpenPopup="onOpenPopup"
              ></good-one>
              <view
                style="
                  text-align: center;
                  padding-top: 50rpx;
                  font-size: 24rpx;
                  color: #999;
                "
                v-if="categoryBox[current].goods_list.length == 0"
              >
                此分类暂无商品
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- #endif -->
        <!-- #ifndef MP-ALIPAY -->
        <scroll-view
          scroll-y
          scroll-with-animation
          class="right-box u-flex-1"
          :scroll-top="scrollRightTop"
          @scroll="rightScroll"
        >
          <view class="page-view">
            <view
              class="class-item"
              :id="'item' + index"
              v-for="(item, index) in categoryBox"
              :key="index"
            >
              <!-- 分类名？？ -->
              <view class="item-title">
                <text>{{ item.name }}</text>
              </view>

              <!--  現在是上午時段 顯示爲早餐菜單-->
              <view class="good_tip">
                <text>查看不可售商品（2件）</text>
                <img :src="'./static/demo/arrow_down.png'" alt="" srcset="" />
              </view>
              <good-one
                :list="item.goods_list"
                @onOpenPopup="onOpenPopup"
              ></good-one>
              <view
                style="
                  text-align: center;
                  padding: 20rpx;
                  font-size: 24rpx;
                  color: #999;
                "
                v-if="item.goods_list == 0"
              >
                暂无商品
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- #endif -->
      </view>
      <!-- tabbar占位高度 -->
      <view :style="{ height: systemInfo.tabbarH + 'px' }"></view>
    </view>
    <!-- 规格弹窗 -->
    <u-popup
      :show="isPopup"
      round="36.628rpx"
      mode="center"
      @close="isPopup = false"
    >
      <specs-popup
        :specGoodsData="specGoodsData"
        :isPopup="isPopup"
        popupType="1"
        @change="onSpecChange"
      ></specs-popup>
    </u-popup>

    <!-- 购物车底部栏 -->
    <view class="bottom_bar_cat">
      <img :src="'./static/demo/cat.png'" alt="" srcset="" />

      <view style="display: flex; align-items: center">
        <view class="retailPrice"> $ 300 </view>
        <view class="rightButton" @click="toConfirmOrder"> 去結算 </view>
      </view>
    </view>
    <f-tabbar :isFillHeight="false"></f-tabbar>
  </view>
</template>

<script>
var num = 0;
var dsq = null;
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl.js";
import goodOne from "@/components/module/good";
import specsPopup from "@/components/module/specs-popup";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";
export default {
  components: {
    goodOne,
    specsPopup,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor"]),
  },
  data() {
    return {
      systemInfo: base.systemInfo,
      isPopup: false,
      categoryBox: [], //分类商品
      current: 0,
      scrollTop: 0,
      specGoodsData: {}, //选择的规格数据

      // ***滑动联动所需参数***
      oldScrollTop: 0,
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemId: "", // 栏目右边scroll-view用于滚动的id
      menuItemPos: [],
      arr: [],
      scrollRightTop: 0, // 右边栏目scroll-view的滚动高度
      timer: null, // 定时器
      flag: false, //禁止current两次赋值
      flag2: true, //是否禁止右侧滑动
      c_id: "", //跳转的参数--定位分类id位置

      buyList: ["外帶", "外送"],
      buyType: 0,
      //   门店信息弹窗
      storeInfoShow: false,
    };
  },
  onLoad(e) {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    // this.c_id = e.c_id
    this.c_id = 9; //跳转的参数--定位分类id位置
    this.getgoodsList();
  },
  onReady() {
    this.getMenuItemTop();
  },
  onShow() {
    // #ifndef MP-ALIPAY
    num = 0;
    this.DSQ();
    // #endif
  },
  methods: {
    // 跳到確認訂單頁
    toConfirmOrder(item) {
      uni.navigateTo({
        url: "/pages/order/ConfirmOrder/index",
      });
    },
    px2upx(n) {
      return n / (uni.upx2px(n) / n);
    },
    onOpenPopup(item) {
      this.specGoodsData = item;
      this.isPopup = true;
    },
    //规格回调
    onSpecChange(e) {
      console.log(e);
      if (e.type != 1 && e.type != 4) {
        this.isPopup = false;
      }
    },
    // 请求商品
    getgoodsList() {
      // uni.$u.http.post('您的接口', httpData).then((res) => {
      // 这里模拟加载的数据
      for (var i = 0; i < 10; i++) {
        var category = {
          name: "分类名" + (i + 1),
          cartNumber: i + 1, //分类已经加入购物车数量
          id: i + 1,
          goods_list: [],
        };
        for (var f = 0; f < 5; f++) {
          var goods = {
            id: f + 1,
            name: "商品名称", //商品名称
            goodsImg:
              "https://img1.baidu.com/it/u=2259593287,4186565444&fm=253&fmt=auto&app=120&f=JPEG?w=1179&h=736", //商品图片
            isPromote: 1, //是否特价
            totalStockCount: 9999, //库存
            goodsDescription: "新品", //商品描述
            price: 59.99, //商品价
            memberPrice: 35.99, //会员价
            buyGoodsNumber: f + 1, //当前加入购物车的数量
            hasProduct: 1, //是否多规格
            monthlySales: 999, //月售
            unit: "份", //单位
            attr_array: ["冰", "少冰", "常溫", "熱"], //规格
          };
          category.goods_list.push(goods);
        }
        this.categoryBox.push(category);
      }
      // 如果有传分类c_id参数-滑动到对应的选项
      // if (this.c_id) {
      //   this.categoryBox.forEach((item, index) => {
      //     if (item.id == this.c_id) {
      //       let time = 1500; //实际接口这里数字可以调小点
      //       // 等待页面渲染完成
      //       setTimeout(() => {
      //         if (index >= 2) {
      //           this.swichMenu(index - 1);
      //         }
      //       }, time);
      //       setTimeout(() => {
      //         this.swichMenu(index);
      //       }, time + 200);
      //     }
      //   });
      // }
      // })
    },
    // 点击左边的栏目切换
    async swichMenu(index) {
      console.log("swichMenu");
      // #ifdef MP-ALIPAY
      if (index == this.current) return;
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect("menu-scroll-view", "menuHeight");
        await this.getElRect("u-tab-item", "menuItemHeight");
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop =
        index * this.menuItemHeight +
        this.menuItemHeight / 2 -
        this.menuHeight / 2;
      // #endif
      // #ifndef MP-ALIPAY
      if (this.arr.length == 0) {
        await this.getMenuItemTop();
      }
      if (index == this.current) return;
      this.scrollRightTop = this.oldScrollTop;
      this.$nextTick(function () {
        this.scrollRightTop = this.arr[index];
        this.current = index;
        this.flag = true;
        this.flag2 = false; //禁止右侧滑动
        this.leftMenuStatus(index);
        num = 0;
      });
      // #endif
    },
    DSQ(isClear) {
      // 解决点击分类，左侧多次滚动
      dsq && clearInterval(dsq);
      dsq = setInterval(() => {
        num += 100;
        if (num > 500) {
          this.flag2 = true;
        }
        // console.log(num)
      }, 100);
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select("." + elClass)
          .fields({ size: true }, (res) => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass);
              }, 10);
              return;
            }
            this[dataVal] = res.height;
          })
          .exec();
      });
    },
    // ***********************************************  微信小程序 S  *****************************************************************
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      console.log("左侧滚动");
      // #ifndef MP-ALIPAY
      if (this.flag) {
        this.current = index;
        this.flag = false;
        console.log(index);
      }
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect("menu-scroll-view", "menuHeight");
        await this.getElRect("u-tab-item", "menuItemHeight");
      }
      console.log(this.menuHeight, "this.menuHeight");
      console.log(this.menuItemHeight, "this.menuItemHeight");
      // 将菜单活动item垂直居中
      this.scrollTop =
        index * this.menuItemHeight +
        this.menuItemHeight / 2 -
        this.menuHeight / 2;
      // #endif
    },
    // 获取右边菜单每个item到顶部的距离
    getMenuItemTop() {
      // #ifndef MP-ALIPAY
      new Promise((resolve) => {
        let selectorQuery = uni.createSelectorQuery();
        selectorQuery
          .selectAll(".class-item")
          .boundingClientRect((rects) => {
            // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
            if (!rects.length) {
              setTimeout(() => {
                this.getMenuItemTop();
              }, 10);
              return;
            }
            rects.forEach((rect) => {
              // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
              this.arr.push(rect.top - rects[0].top);
              resolve();
            });
          })
          .exec();
      });
      // #endif
    },
    // 右边菜单滚动
    async rightScroll(e) {
      // #ifndef MP-ALIPAY
      if (this.flag2 && !this.flag) {
        console.log("右侧滚动");
        this.oldScrollTop = e.detail.scrollTop;
        if (this.arr.length == 0) {
          await this.getMenuItemTop();
        }
        if (this.timer) return;
        if (!this.menuHeight) {
          await this.getElRect("menu-scroll-view", "menuHeight");
        }
        setTimeout(() => {
          // 节流
          this.timer = null;
          // scrollHeight为右边菜单垂直中点位置
          let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
          for (let i = 0; i < this.arr.length; i++) {
            let height1 = this.arr[i];
            let height2 = this.arr[i + 1];
            // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
            if (
              !height2 ||
              (scrollHeight >= height1 && scrollHeight < height2)
            ) {
              this.flag = true;
              this.leftMenuStatus(i);
              return;
            }
          }
        }, 10);
      }
      // #endif
    },
    // ***********************************************  微信小程序 E  *****************************************************************
    buyTypeChange(inde) {
      this.buyType = inde;
    },
    storeInfoClose() {
      this.storeInfoShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: rgba(255, 255, 255, 1);
}
.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}
.u-search-box {
  background-color: #fff;
  padding: 18rpx 30rpx;
  border-bottom: 2rpx solid #eeeeee;
  width: 750rpx;
}
.u-search-inner {
  background-color: #f5f5f5;
  border-radius: 100rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  padding: 10rpx 16rpx;
}
.u-search-text {
  font-size: 26rpx;
  color: #999;
  margin-left: 10rpx;
}

.u-menu-wrap {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  overflow: hidden;
}
.u-tab-view {
  width: 233.721rpx;
  height: 100%;
  background: #fff;
  border-right: 2rpx solid #eeeeee;
}
.u-tab-item {
  width: 233.721rpx;
  // height: 110rpx;
  padding: 38rpx 24rpx;
  background: #fff;
  box-sizing: border-box;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #333;
  font-weight: 400;
  line-height: 1;
  position: relative;
  z-index: 10;
  .cartNumber {
    position: absolute;
    z-index: 10;
    border-radius: 34rpx;
    top: 8rpx;
    right: 8rpx;
    // width: 34rpx;
    padding: 0 10rpx;
    height: 34rpx;
    text-align: center;
    line-height: 34rpx;
    background: #fe461d;
    color: #fff;
    font-size: 24rpx;
  }
  text {
    line-height: 1.2;
    color: #333;
  }
}
.u-tab-item-active {
  position: relative;
  z-index: 10;
  color: #fe461d;
  font-weight: 600;
  background: #fff;
  text {
    color: #fe461d;
  }
}
.u-tab-item-active::before {
  content: "";
  position: absolute;
  z-index: 10;
  border-left: 4rpx solid #fe461d;
  height: 32rpx;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.u-tab-view {
  height: 100%;
}
.right-box {
  /* #ifdef MP-ALIPAY */
  background-color: #fff;
  /* #endif */
  /* #ifndef MP-ALIPAY */
  background-color: #f5f5f5;
  /* #endif */
}
.page-view {
  // padding: 16rpx;
}
.class-item {
  // margin-bottom: 30rpx;
  background-color: #fff;
  padding: 24rpx 24rpx 0;
  border-radius: 8rpx;
  /* #ifndef MP-ALIPAY */
  // margin-bottom: 20rpx;
  /* #endif */
}
.item-title {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  text {
    color: #999;
    font-size: 24rpx;
  }
}
.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: #333;
}
.item-container {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-wrap: wrap;
}

// 後續新增
.good_store_card {
  padding: 0 26.163rpx 0 26.163rpx;

  .store_card_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .store_card_top_title {
    font-family: "Microsoft PhagsPa";
    font-size: 34.884rpx;
    font-weight: 400;
    text-align: left;
  }

  .store_card_top_actions {
    width: 209.302rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 48.837rpx;
    border-radius: 80.233rpx;
    border: 0.3px solid rgba(210, 210, 210, 1);
    background: rgba(250, 250, 250, 1);
    color: rgba(68, 68, 68, 1);

    .action_wai_active {
      background: rgba(247, 154, 77, 1);
      color: rgba(255, 255, 255, 1);
      width: 104.651rpx;

      height: 48.837rpx;
      border-radius: 80.233rpx;

      font-size: 20.93rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .action_wai {
      background: rgba(250, 250, 250, 1);
      width: 104.651rpx;

      height: 48.837rpx;
      border-radius: 80.233rpx;

      font-size: 20.93rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(68, 68, 68, 1);
    }

    .waisong {
      background: rgba(250, 250, 250, 1);
      width: 104.651rpx;

      height: 48.837rpx;
      border-radius: 80.233rpx;

      font-size: 20.93rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(68, 68, 68, 1);
    }

    .waisong_active {
      background: rgba(36, 118, 173, 1);
      width: 104.651rpx;

      height: 48.837rpx;
      border-radius: 80.233rpx;

      font-size: 20.93rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 1);
    }
  }
}

.store_addree {
  font-family: "Microsoft PhagsPa";
  font-size: 24.419rpx;
  font-weight: 400;
  text-align: left;

  display: flex;
  align-items: center;

  text {
    margin-left: 12rpx;
  }
}

.store_info {
  font-family: "Microsoft PhagsPa";
  font-size: 26.163rpx;
  font-weight: 400;
  text-align: right;
  display: flex;
  align-items: center;
}
.store_card_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;

  margin-bottom: 38rpx;
}
.info_popup {
  width: 430px;
  height: 362.791rpx;
  border-radius: 26.163rpx 26.163rpx 0px 0px;

  padding: 69.767rpx 34.884rpx 34.884rpx 34.884rpx;

  .store_title {
    font-family: "Microsoft PhagsPa";
    font-size: 34.884rpx;
    font-weight: 400;
    text-align: left;
    color: rgba(0, 0, 0, 1);
    margin-top: 17.442rpx;
    margin-bottom: 17.442rpx;
  }

  .desc {
    font-family: "DengXian";
    font-size: 24.419rpx;
    font-weight: 400;

    text-align: left;
    color: rgba(0, 0, 0, 1);

    margin-top: 12rpx;
  }
}

.good_tip {
  width: 472.674rpx;
  height: 68.023rpx;
  border-radius: 31.395rpx;
  background: rgba(230, 230, 230, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10.465rpx;
  margin-bottom: 10.465rpx;

  text {
    font-family: "Microsoft PhagsPa";
    font-size: 22.674rpx;
    font-weight: 400;
    text-align: center;
    color: rgba(111, 111, 111, 1);
  }
}

.bottom_bar_cat {
  background: rgba(237, 237, 237, 1);
  width: 100%;
  height: 127.326rpx;
  position: fixed;
  bottom: 80px;

  display: flex;
  justify-content: end;
  align-items: center;

  z-index: 1000;

  img {
    position: absolute;
    left: 26.163rpx;
    top: -30rpx;
  }

  .retailPrice {
    color: rgba(0, 0, 0, 1);
    font-family: "Microsoft PhagsPa";
    font-size: 34.884rpx;
  }

  .rightButton {
    width: 228.488rpx;
    height: 101.163rpx;
    border-radius: 17.442rpx;
    background: rgba(247, 154, 77, 1);

    font-family: "Microsoft Sans Serif";
    font-size: 34.884rpx;
    font-weight: 400;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(255, 255, 255, 1);

    margin-left: 20.93rpx;

    margin-right: 20.93rpx;
  }
}
</style>
